<script>
import FaceRecognition from './FaceRecognition'
import { facial } from '@/api/experiment'

export default {
  components: {
    FaceRecognition
  },
  name: 'GroupAdd',
  data() {
    return {
      visible: false,
      form: {
        faceUrl: null,
        studentCode: null,
        workId: null
      },
      experimentName: null
    }
  },
  methods: {
    reset() {
      for (const key in this.form) {
        this.form[key] = null
      }
      this.visible = false
    },
    $show(e) {
      this.experimentName = e['experimentName']
      this.form.workId = e['id']
      this.visible = true
    },
    handleSubmit() {
      if(!this.form.studentCode) {
        this.$message.warning(this.$locale('jobList.add.Please enter your student ID'))
        return
      }
      if(!this.form.faceUrl) {
        this.$message.warning(this.$locale('experiment.components.GroupAdd.Please take a photo'))
        return
      }
      facial(this.form).then(() => {
        this.$message.success(this.$locale('formMarkering.list.tip5'))
        this.$emit('refresh', 0)
        this.reset()
      })
    },
    handleCancel() {
      this.reset()
    },
    handleUpload(e) {
      this.form.faceUrl = e
    }
  }
}
</script>

<template>
  <el-dialog :visible.sync="visible" :show-close="false" :close-on-click-modal="false" :title="$locale('experiment.components.GroupAdd.Add a team member for facial recognition')" width="540px" destroy-on-close>
    <template #footer>
      <el-button type='primary' size='small' @click='handleSubmit'>提交</el-button>
      <el-button size='small' @click='handleCancel'>取消</el-button>
    </template>
    <el-form label-position="top">
      <el-form-item :label="$locale('geWudevice.add.Experiment Name')">
        <span>{{ experimentName }}</span>
      </el-form-item>
      <el-form-item :label="$locale('experiment.components.GroupAdd.Face recognition')">
        <face-recognition ref='refFaceRecognition' @uploadSuccess='handleUpload' />
      </el-form-item>
      <el-form-item :label="$locale('jobList.add.Student ID')">
        <el-input v-model='form.studentCode' :placeholder="$locale('jobList.add.Please enter your student ID')" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
